<template>
  <div class="home_main">
    <div class="home_header">
      <div class="home_header__logo">
        <router-link to="/" tag="div">
          <img class="img" :src="imgDict.logo_header" alt="LOGO" />
        </router-link>
      </div>
      <div class="home_header__info">
        <div
          class="attr"
          :class="{ active: $route.path === '/' }"
          @click="link('/')"
        >
          <div>首页</div>
        </div>
        <div
          class="attr"
          :class="{ active: $route.path === '/periodical' }"
          @click="link('/periodical')"
        >
          <div>期刊</div>
        </div>
        <div
          class="attr"
          :class="{ active: $route.path === '/report' }"
          @click="link('/report')"
        >
          <div>报告</div>
        </div>
        <div
          class="attr"
          :class="{ active: $route.path === '/journalism' }"
          @click="link('/journalism')"
        >
          <div>新闻</div>
        </div>
        <div
          class="attr"
          :class="{ active: $route.path === '/feeds' }"
          @click="link('/feeds')"
        >
          <div>关注</div>
        </div>
        <div
          class="attr"
          :class="{ active: $route.path === '/release' }"
          @click="link('/release')"
        >
          <div>发布</div>
        </div>
        <div class="attr keyword">
          <el-select v-model="field" placeholder="请选择">
            <el-option
              v-for="(item, key) in config.dict.field"
              :key="key"
              :label="item"
              :value="key"
            >
            </el-option>
          </el-select>
          <el-select v-model="type" slot="prepend">
            <el-option label="查询类型" value="99"></el-option>
            <el-option label="期刊" value="0"></el-option>
            <el-option label="报告" value="2"></el-option>
            <el-option label="新闻" value="1"></el-option>
          </el-select>
          <el-input class="flex1" placeholder="检索文献" v-model="keyword">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleIconClick"
            ></el-button>
            <el-button v-if="isTwoSearch" slot="append" @click="handleSelect"
              >基于结果搜索</el-button
            >
          </el-input>
        </div>
      </div>
      <div class="home_header__user">
        <div class="btn user-info">
          <el-popover
            popper-class="user_info_popover"
            placement="bottom"
            width="230"
            trigger="hover"
            v-model="model"
          >
            <img
              class="img-thumbnail"
              :src="operator.portrait || imgDict.headPortrait"
              slot="reference"
            />
            <div class="module-content">
              <div class="user-headPortrait">
                <img
                  class="img"
                  :src="operator.portrait || imgDict.headPortrait"
                />
                <i
                  class="icon"
                  v-if="operator.gender"
                  :class="
                    operator.gender === '1'
                      ? 'man el-icon-male'
                      : 'woman el-icon-female'
                  "
                ></i>
              </div>
              <h4 class="name">{{ operator.nickname | across }}</h4>
              <!-- <p class="phone">{{ operator.telephone | hidePhone }}</p> -->
              <p class="phone">{{ operator.username | across }}</p>
              <p class="position" v-if="operator.school">
                {{ operator.school | across }}
              </p>
              <p class="tags">
                <el-tag v-for="(item, key) in operator.tagList" :key="key">
                  {{ item }}
                </el-tag>
              </p>
            </div>
            <div class="user-info_list">
              <div
                class="transition item"
                v-for="(item, key) in userInfoList"
                :key="key"
                @click="link(item.path)"
              >
                <i class="icon" :class="item.ico"></i>{{ item.name }}
              </div>
              <div class="transition item" @click="link('/about')">
                <i class="icon el-icon-link"></i>关于
              </div>
              <div
                class="transition item"
                @click="logOut"
                v-if="operator.userId"
              >
                <i class="icon el-icon-switch-button"></i>退出账户
              </div>
            </div>
          </el-popover>
        </div>
      </div>
    </div>
    <div class="home_body">
      <div class="home_body__content clearfix">
        <transition name="fade">
          <router-view />
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import imgDict from "@/utils/img";
import apiCode from "@/api/apiConfig";

export default {
  name: "index",
  components: {},
  filters: "",
  mixins: [],
  data() {
    return {
      model: false, // 设置一个model窗，操作header上的hover操作覆盖
      imgDict, // 图片
      feedsLoading: false,
      feedsList: [], // 关注列表
      field: "ALL",
      type: "99",
      keyword: "",
      userInfoList: [{ ico: "el-icon-user", path: "/login", name: "登录" }],
    };
  },
  watch: {
    $route(value) {
      if (value.path !== "/query") {
        this.$store.commit("menuTabs/isTwoSearchChange", false);
      }
    },
  },
  computed: {
    ...mapState("user", {
      operator: "operator",
    }),
    ...mapState("menuTabs", {
      queryArr: "queryArr",
      isTwoSearch: "isTwoSearch",
    }),
  },
  created() {
    if (this.$route.query.keyword) {
      this.type = this.$route.query.type;
      this.keyword = this.$route.query.keyword;
      this.field = this.$route.query.field;
    }
    if (this.operator && this.operator.userId) {
      this.userInfoList = [
        { ico: "el-icon-suitcase", path: "/collection", name: "我的收藏" },
        { ico: "el-icon-view", path: "/follow", name: "我的关注" },
        { ico: "el-icon-edit-outline", path: "/followMy", name: "关注我的" },
        { ico: "el-icon-edit-outline", path: "/editData", name: "编辑资料" },
        { ico: "el-icon-key", path: "/changePassword", name: "修改密码" },
      ];
      this.getUserInfo();
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      let result = await this.$get(`api/user/${this.operator.userId}`);
      if (result && result.code === apiCode.code.success) {
        let params = Object.assign({}, this.operator, result.data);
        this.$store.commit("user/saveOperator", params);
      }
    },
    // 退出
    async logOut() {
      const status = await this.$CONFIRM("您确定要退出登录吗？", "退出登录");
      if (status) {
        this.$store.commit("user/removeOperator");
        this.$router.push("/login");
      }
    },
    // 关注列表
    async getFeeds() {
      this.feedsLoading = true;
      let result = await this.$get(`api/user/feeds`);
      this.feedsLoading = false;
      if (result && result.code === apiCode.code.success) {
        const { data } = result;
        this.feedsList = data || [];
      }
    },
    // 跳转
    link(path, type) {
      this.type = "99";
      this.keyword = "";
      if (type === "quterChain") {
        window.open(path, "_blank");
      } else {
        this.model = false;
        if (path === "/release" && !this.operator.userId) {
          this.$router.push("/login");
          return;
        }
        this.$router.push(path);
      }
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [];
    },
    handleSelect() {
      if (this.keyword) {
        if (this.queryArr.length) {
          this.$store.commit("menuTabs/addQueryParams", {
            type: this.type,
            value: this.keyword,
            field: this.field,
          });
        }
        this.$router.push({
          path: "/query",
          query: {
            date: new Date().getTime(),
          },
        });
      } else {
        this.$message.error("请输入要搜索的内容");
      }
      this.keyword = "";
    },
    handleIconClick() {
      if (this.keyword) {
        this.$router.push({
          path: "/query",
          query: {
            type: this.type,
            content: this.keyword,
            field: this.field,
          },
        });
        this.$store.commit("menuTabs/initQueryParams", {
          type: this.type,
          value: this.keyword,
          field: this.field,
        });
      } else {
        this.$message.error("请输入要搜索的内容");
      }
      this.keyword = "";
    },
  },
};
</script>

<style lang="scss">
@keyframes pulse {
  0% {
    opacity: 1;
    width: 7px;
    height: 7px;
    left: 0;
    top: 0;
  }
  95% {
    opacity: 0.1;
    left: -10.5px;
    top: -10.5px;
    width: 28px;
    height: 28px;
  }
  100% {
    opacity: 0;
    width: 7px;
    height: 7px;
    left: 0;
    top: 0;
  }
}

.user_info_popover {
  padding: 15px 0 0 0 !important;

  .module-content {
    text-align: center;

    .user-headPortrait {
      margin: 10px auto 15px auto;
      position: relative;
      width: 70px;
      height: 70px;

      .img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
      }

      .icon {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 19px;
        height: 19px;
        line-height: 20px;
        text-align: center;
        border-radius: 50px;
        font-size: 12px;

        &.man {
          background-color: $blue;
          color: $white;
        }

        &.woman {
          background-color: $orange;
          color: $white;
        }
      }
    }

    .name {
      font-size: 18px;
    }

    .phone {
      text-align: center;
      font-size: 12px;
      margin: 3px auto 7px auto;
    }

    .position {
      background-color: $mc;
      color: $white;
      display: inline-block;
      border-radius: 2px;
      padding: 3px 6px;
      font-size: 12px;
    }
    .tags {
      display: flex;
      text-align: center;
      justify-content: center;
      flex-wrap: wrap;
    }
  }

  .user-info_list {
    border-radius: 0 0 4px 4px;
    position: relative;
    margin-top: 30px;

    &:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 1px;
      background-color: $f5;
    }

    .item {
      position: relative;
      line-height: 48px;
      cursor: pointer;
      padding: 0 12px;

      & + .item:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 12px;
        height: 1px;
        background-color: $f5;
      }

      &:hover {
        background-color: $f5;
        color: $mc;
      }

      .icon {
        margin-right: 12px;
      }
    }
  }
}

.home_main {
  position: relative;
  .home_header {
    height: 60px;
    line-height: 60px;
    background-color: $mc;
    box-shadow: 0 1px 8px 0 $shadow;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .home_header__logo {
      .router-link-active {
        position: relative;
        cursor: pointer;
        line-height: 1;
        padding: 12px;
        height: 60px;

        .img {
          max-height: 36px;
        }
      }
    }

    .home_header__info {
      flex: 1;
      display: flex;
      .attr {
        text-align: center;
        position: relative;
        cursor: pointer;
        padding: 0 30px;
        color: #fff;
        overflow: hidden;

        &:before {
          content: "";
          position: absolute;
          bottom: -10px;
          left: 50%;
          margin-left: -10px;
          width: 20px;
          height: 2px;
          border-radius: 5px;
          background-color: #fff;
          -webkit-transition: all 0.2s ease;
          -moz-transition: all 0.2s ease;
          -ms-transition: all 0.2s ease;
          -o-transition: all 0.2s ease;
          transition: all 0.2s ease;
        }

        &:hover:before,
        &.active:before {
          bottom: 10px;
        }

        &.keyword {
          width: 550px;

          .el-select {
            margin-right: 10px;
            width: 100px;

            .el-input {
              width: 100px;
            }
          }

          .aaaa {
            width: 300px;

            .el-select {
              margin-right: 0;
              width: 80px;
            }
          }

          &:hover:before {
            bottom: -10px;
          }

          .el-autocomplete {
            width: 100%;
          }

          .el-input {
            .el-input-group__prepend {
              width: 80px;
            }
          }
        }
      }
      .keyword {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        .flex1 {
          flex: 1;
        }
      }
    }

    .home_header__user {
      height: 60px;
      z-index: 10;
    }

    .btn {
      float: left;
      text-align: center;
      position: relative;
      cursor: pointer;
      min-width: 60px;

      &.user-info {
        .img-thumbnail {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          padding: 15px;
        }
      }

      &.btn-icon {
        &:hover {
          color: $mc;
          background-color: $f9fafb;
        }

        .iconfont {
          width: 60px;
          display: block;
          font-size: 18px;
        }

        .indicator {
          position: absolute;
          top: 18px;
          right: 18px;

          .circle {
            background: $mc;
            width: 6px;
            height: 6px;
            border-radius: 50%;

            &:before {
              background-color: $mc;
              content: "";
              display: table;
              border-radius: 50%;
              position: absolute;
              animation-name: pulse;
              animation-duration: 0.9s;
              animation-iteration-count: infinite;
              animation-timing-function: ease-out;
            }
          }
        }
      }
    }
  }

  .home_body {
    height: calc(100vh - 110px);
    margin: 0 auto;
    display: flex;

    .feeds,
    .home_body__content,
    .display_area {
      height: calc(100vh - 130px);
      position: relative;
    }

    .feeds {
      background-color: $white;
      margin: 10px;
      width: 20%;
    }

    .home_body__content {
      @include scroll-beautify(0, transparent, transparent, scroll);
      margin: 10px auto;
      width: 1440px;
    }

    .display_area {
      background-color: $white;
      margin: 10px;
      width: 20%;
    }
  }
}
</style>
